<template>
  <div >
    <el-container>
<!--头部开始********************************************************-->
      <el-header height="150">
        <!--页眉开始************************-->
        <div style="font-size: 12px;
            margin: -13px -30px 0 -30px;
            background-color: #333;">
                <span style="margin-left:200px;line-height: 40px;">
                    <a href="">玺玛特首页</a><el-divider direction="vertical"></el-divider>
                    <a href="../admin/login">尔玉入口</a><el-divider direction="vertical"></el-divider>
                    <a href="">商家入驻</a><el-divider direction="vertical"></el-divider>
                    <a href="">社会招聘</a><el-divider direction="vertical"></el-divider>
                    <a href="">校园招聘</a><el-divider direction="vertical"></el-divider>
                    <a href="/user/login">个人中心</a><el-divider direction="vertical"></el-divider>
                    <a href="">帮助</a>
                    <a href="../user/reg" style="padding-left: 260px;">注册</a>
                    <a href="../user/login" style="padding-left: 10px;">登录</a>
                </span>
        </div>
        <!--页眉结束************************-->

        <!--*********蓝色导航条开始**********-->
        <div style="width:100%;height: 88px;margin: 0 auto">
          <img src="../assets/logo.png" style="width: 70px;margin: 10px 0;" alt="">
          <div style="float:right;margin: 20px 0;">
            <el-menu style="width: 1200px;margin: 0 auto;font-size: 30px" mode="horizontal"
                     class="el-menu-demo"
                     background-color="#fff"
                     text-color="#000"
                     active-text-color="#3f3f3f"
                     @select="handleSelect">
              <el-menu-item v-for="c in categoryArr" :index="c.id">{{c.name}}</el-menu-item>
              <!--搜索框开始-->
              <div style="float: right;margin: 11px 11px">
                <el-input placeholder="Xi-phone" class="input-with-select">
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </div>
              <!--搜索框结束-->
            </el-menu>
          </div>
        </div>
        <!--*********蓝色导航条结束**********-->
      </el-header>
<!--头部结束********************************************************-->

<!--主体开始********************************************************-->
      <el-main style="width: 1200px;margin: 0 auto">

        <!--********轮播图开始*********-->
        <div>
          <el-carousel trigger="click" height="400px">
            <el-carousel-item v-for="b in bannerArr">
              <img :src="b.url" alt="" style="width:100%">
            </el-carousel-item>
          </el-carousel>
        </div>
        <!--********轮播图结束*********-->
        <!--********排行榜开始*********-->
        <div>
          <el-row>
            <el-col :span="6" style="margin: 10px 0;">
              <el-card style="height: 367px">
                <h3><i style="font-weight: bold"
                       class="el-icon-trophy"></i>销量最高</h3>
                <el-divider></el-divider>
                <el-table :data="topArr" style="width: 240px">
                  <el-table-column type="index" label="排名" width="60">
                  </el-table-column>
                  <el-table-column prop="title" label="商品名" width="120">
                  </el-table-column>
                  <el-table-column prop="saleCount" label="销量" width="60">
                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>
            <!--销量表中可以有多个，右侧展示销量第1，2，3-->
            <el-col :span="6" style="float: left;margin: 10px 0;" v-for="t in topArr">
              <el-card>
                <div>
                  <img :src="t.url" width="100%" alt="">
                </div>
                <div>
                  <p style="font-size: 15px;margin-top: 0;height: 40px">{{t.title}}</p>
                  <div style="color: #666">
                    <span>￥{{t.price}}</span>
                    <s style="font-size: 12px">{{t.oldPrice}}</s>
                    <span style="float: right">销量:{{t.saleCount}}件</span>
                  </div>
                </div>
              </el-card>
            </el-col>

          </el-row>
        </div>
        <!--********排行榜结束*********-->

        <!--**********商品列表开始*********-->
        <div>
          <!--**********分割图开始*********-->
          <div style="margin: 20px 0">
            <img src="public/imgs/cut03.png" width="1820" alt="">
          </div>
          <!--**********分割图结束*********-->

          <span>
                    <a href="">手机</a>
                    <a href="" style="float: right;">
                           查看更多<i class="el-icon-arrow-right"></i>
                      <!--<el-button plain style="float: right">查看更多</el-button>-->
                    </a>
                </span>
          <el-row style="margin-top: 10px">
            <el-col :span="6" v-for="p in productArr">
              <el-card>
                <div>
                  <img :src="p.url" width="100%" alt="">
                </div>
                <div>
                  <p style="font-size: 15px;margin-top: 0;height: 40px">{{p.title}}</p>
                  <div style="color: #666">
                    <span>￥{{p.price}}</span>
                    <s style="font-size: 12px">{{p.oldPrice}}</s>
                    <span style="float: right">销量:{{p.saleCount}}件</span>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <!--**********商品列表结束*********-->
        </div>
      </el-main>
<!--主体结束********************************************************-->

      <!--脚部开始********************************************************-->
      <el-footer>
        <!--margin-bottom: -30px让下面的元素盖住本元素-->
        <!-- <div style="height: 95px;background-image: url('imgs/.png');
         margin-bottom: -30px"></div>-->
        <div style="height: 60px;font-size: 14px;background-color: #3f3f3f;
            color: #b1b1b1;text-align: center;padding: 10px">
          <p>Copyright © 北京玺欢科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
          <p>本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
        </div>
      </el-footer>
      <!--脚部结束********************************************************-->
    </el-container>
  </div>
</template>

<style>
a{
  text-decoration: none;
  color: #3a8ee6;
}
</style>

<script>


import axios from "axios";

export default {
 data: function () {
   return {
     categoryArr: [{id: 1, name: "玺爱手机"}, {id: 2, name: "高清电视"},
       {id: 3, name: "笔记本电脑"}, {id: 4, name: "智能家电"}, {id: 5, name: "健康儿童"},
       {id: 6, name: "生活箱包"},],
     bannerArr: [{url: "imgs/banner/banner01.jpg"}, {url: "imgs/banner/banner02.jpg"}],
     topArr: [{
       title: "京玺办公笔记本",
       price: 4233,
       oldPrice: 5598,
       url: "imgs/computer/xbook011.png",
       saleCount: 2342
     },
       {
         title: "多功能手表",
         price: 1048,
         oldPrice: 2999,
         url: "imgs/watch/watch011.png",
         saleCount: 1564
       },
       {
         title: "玺爱天骄手机",
         price: 2888,
         oldPrice: 3598,
         url: "imgs/phone/phone011.png",
         saleCount: 856
       }],
     productArr: [{
       title: "京玺15.6酷睿i9十二代8核独显轻薄办公笔记本",
       price: 4233,
       oldPrice: 5598,
       url: "imgs/computer/xbook011.png",
       saleCount: 2342
     },
       {
         title: "蓝宝石玻璃镜面不锈钢边框多功能手表",
         price: 1048,
         oldPrice: 2999,
         url: "imgs/watch/watch011.png",
         saleCount: 1564
       },
       {
         title: "玺爱天骄系列xphone20plus全面屏拍照手机",
         price: 2888,
         oldPrice: 3598,
         url: "imgs/phone/phone011.png",
         saleCount: 856
       },
       {
         title: "玺爱天骄系列xphone20plus全面屏拍照手机",
         price: 2888,
         oldPrice: 3598,
         url: "imgs/phone/phone011.png",
         saleCount: 856
       }]
   }
 },
  methods: {
    handleSelect(index, indexPath) {
      console.log(index);
    }
  },
  created: function () {
    //发请求获取分类信息
    axios.get("/category/select").then(function (response) {

    })
    //发请求获取轮播图信息
    axios.get("/banner/select").then(function (response) {

    })
  }
}
</script>
